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Preparing to Transfer Graphics Across the Web 


In this chapter, you will: 
Understand the effect of color on file size 
Change color depth 


+ 
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è Select a file format 

* Save files as Web graphics 
+ 


Optimize images with Photoshop and ImageReady 


W graphics are different from other computer graphics because they 
must be transferred across the Internet. Large files take a long time to 
transfer, forcing users to wait while the images download on their computer. 
Your goal is to make graphics files as small as possible while still illustrating 
the content you intend. Most graphics files contain unnecessary data that can 
be discarded without affecting the appearance of the image. Eliminating 
unnecessary data is called optimizing, and results in small image files that users 
can download more quickly from the Web to their computers. 


You can optimize an image file either by reducing the number of colors used 
by the image, or by compressing the data stored in the image file. The color- 
reduction method is better for images with solid color, and the compression 
method is better for images with gradations of color. 


You should optimize every Web graphic you create. Learning how to optimize 
computer graphics for the Web is the focus of this chapter. 
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UNDERSTANDING THE EFFECT OF COLOR ON FILE SIZE 


Like all files that make up Web pages, graphics files should be as small as possible so they 
download quickly. Images with more colors tend to have larger file sizes than images 
with very few colors. The trick is to reduce the number of colors in an image without 
reducing the quality of the image. 


Understanding File Size 


The smallest unit for measuring the size of an image file is the bit. A bit is a BInary 
digiT and is basically a tiny space in a computer’s memory that acts like a switch that 
can be turned on (set to 1) or off (set to 0). A byte is a more common unit, and is equal 
to 8 bits. The next largest unit is the kilobyte, which is equal to 1,024 bytes. A kilobit is 
1,024 bits, or one-eighth the size of a kilobyte. Kilobits are usually used when measur- 
ing network transfer speeds. Modems are characterized by their transfer rate, measured 
in kilobits per second (Kbps). 


File size is measured in kilobytes. The term kilobyte is often shortened to KB or just K, as 
in “Keep the animated ad banner under 12 K.” Operating systems and other software usu- 
ally display file size in terms of block sizes instead of kilobytes. Think of an ice cube tray as 
a block of memory, with each of the 16 wells being a kilobyte. If you have a file of 40 kilo- 
bytes, you need three trays, but do not fill all of the wells. All the same, your operating sys- 
tem detects that the file uses three trays and lists the size as 48 kilobytes (three full blocks of 
16 kilobytes each) instead of the true number, 40. This rounding up is misleading, and indi- 
cates the file is bigger than it really is. In Figure 2-1, the blue area shows 40 kilobytes being 
used, although the computer counts three blocks, or 48 kilobytes, in use. 
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Figure 2-4 File using 40 kilobytes, but three blocks 


To see the true size of a file on a Macintosh computer, select a file and choose 
gt Get Info from the File menu. On a Windows computer, right-click the file in 


Windows Explorer or My Computer, and then click Properties to see the file size. 


The number of bits in an image file is set by the three dimensions of height, width, and 
color depth. If two images show rectangles, but one rectangle is wider and taller than 
the other, the larger image has a larger file size. The size of an image file is also based on 
color, as explained in the following section. 
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Understanding Color Depth 


As defined in the previous chapter, a bitmap image is a grid of pixels.You can easily see 
that an image has a certain width and height. What is not so obvious is that an image 
has a specific depth as well. The color depth of an image is the number of available 
colors for each pixel. Color depth is sometimes called bit depth or pixel depth. Just as 
increasing the height or width of an image increases the file size, increasing the color 
depth of an image also increases the file size. 


The color depth does not indicate how many colors are actually used in an image. It only 
tells you how many colors are available for the image. You cannot calculate the color depth 
of an image by looking at it. The images in Figure 2-2 all use the same number of colors, 
but have different color depths. The images with greater color depths have more memory 
allocated to them, increasing their file size. Image 1 is the original, unoptimized image and 
uses about 6 KB. Image 2 has a color depth of 256 colors and uses about 2.3 KB. Image 3 
has a color depth of 128 colors and uses about 1.8 KB, while Image 4 has a color depth of 
64 colors and uses about 1.4 KB. Yet these images are identical; — images 1, 2, and 3 do not 
need the extra depth to show all their colors. The extra memory is wasted and makes the 
image files unnecessarily large. 
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Figure 2-2 The same image using different color depths 


The number of colors actually used in an image is called the color palette, also called 
the color table. (This is unrelated to the Color palette in Photoshop and ImageReady.) 
The color palette of an image cannot be larger than the color depth, but can sometimes 
be smaller. For example, in Figure 2-2, image 2 has a color depth of 256 colors, but a 
palette of 64 colors. An image with a color depth of 256 colors can have a palette of any 
size up to 256 colors. 
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As discussed in the “Understanding File Size” section, each pixel is associated with at 
least one bit of computer memory. For a black and white image, each pixel has exactly 
one bit associated with it. If the bit is set to 1, the pixel is white; if the bit is 0, the pixel 
is black. This is called 1-bit color depth and yields a palette of two colors. The word 
bitmap is often used to describe these 1-bit, black and white images. 


The term bitmap can mean two things. As noted in the “Introduction to Web 
Graphics” chapter, a bitmap refers to a computer graphic that is not vector 
based. All rasterized images are bitmaps. Bitmap also means an image with 
1-bit color depth. 


Figure 2-3 shows the color table of an image with a 1-bit color depth that yields two 
colors: black and white. 


Black and white image 


Color palette for the image 


Figure 2-3 The color palette for a 1-bit image 
An image with 2-bit color has two bits associated with each pixel, giving four colors in 
the palette (2 X 2 = 2?= 4). Table 2-1 shows the possible combinations of bits and col- 


ors in a 2-bit color image. 


Table 2-1 Two-bit color depth provides a palette of four colors 


Color a 
Color b 
White 
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Colors a and b could be any color: two shades of gray, red and blue, green and dark 
green, and so on. Figure 2-4 shows the color table of an image with 2-bit color depth 
that yields four colors: black, white, and two shades of gray. 
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Figure 2-4 A possible color palette for a 2-bit image 


Adding another bit doubles the possible colors again, so that 3-bit color yields eight col- 
ors in the palette (2 X 2 X 2 = 23 = 8). Table 2-2 shows the possible combinations of 
bits and colors in a 3-bit color image. 


Table 2-2 Three-bit color depth provides a palette of eight colors 


(0) 


Color 
Black 
Color a 
Color b 
Color c 
Color d 
Color e 
Color f 
White 
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Figure 2-5 shows the color table of an image with 3-bit color depth that yields eight 
colors: black, white, and six other colors. 


An image with 4-bit color adds another bit for each pixel, and doubles the number of col- 
ors again to create a maximum of 16 colors in the palette (2 X 2 X 2 X 2 = 24= 16). With 
each additional bit, the color depth doubles, and the size of the file roughly doubles as well. 
Changing the color depth does not necessarily affect the color palette. If an image uses 
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10 colors in its table, and you change the color depth from 4-bit (16) to 5-bit (32), the table 
does not change. It still contains 10 colors with several unused colors available. If the depth 
changes from 4-bit (16) to 3-bit (8), however, the color palette loses two colors. 
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Color palette for the image 


Figure 2-5 A possible color palette for a 3-bit image 


Color depth can be any power of two, up to 28, or 256 colors. Although 256 seems like 
a lot of colors, some images, such as those with smooth gradations of color require far 
more than 256 colors to look realistic. Figure 2-6 shows an image with 64 colors, clearly 
not enough to replicate the transition from one color to another. 


Figure 2-6 An image with inadequate color depth 


Understanding the Effect of Color on File Size 45 


You can use 16-bit color in Photoshop, which produces 216, or 65,536 colors. 
However, 16-bit images do not display on many browsers because they use 
16 bits per channel. 


If 8-bit color depth is not enough, you can increase the depth to 24 bits. A color depth 
of 24 bits divides the color information of the image into three color channels, one for 
red, one for green, and one for blue. Each channel is an 8-bit color table containing only 
shades of one primary color. This creates a much larger color table, with 16,777,216 
different colors. This number, usually called millions of colors or 16 million colors, is the 
result of multiplying the color depths for each color channel, 28 X 28 X 28 = 256 X 
256 X 256 = 244 = 16,777,216. 


When you decide which color depth to use, keep in mind that increasing the depth 
sometimes increases the quality of the image, and always increases the file size. Keep the 
color depth as small as possible without sacrificing image quality. For example, you can 
convert some 8-bit images to 7-bit color and roughly halve the file size without hurt- 
ing the detail in the image. 


Table 2-3 shows all the color depths you can use in computer graphics and their corre- 
sponding color palette. It also lists appropriate uses for some palettes. 


Table 2-3 Table of possible color depths 


Color Depth | Maximum Color Palette | When Used 


2 colors Line art, black and white 


4 colors 

8 colors Good for most scanned black and white drawings 
and figures 

16 colors 

32 colors Minimum depth for most color images 


64 colors 


128 colors 


256 colors Maximum color depth for GIF and PNG-8 images 
One full-color channel 

16,777,216 colors Only depth available for JPEG and PNG-24 images 
RGB Color 


Three full-color channels 
16,777,216 colors, plus | RGB plus alpha 

a fourth 8-bit 
transparency channel 
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Using Color Modes in Photoshop and ImageReady 


In Photoshop and ImageReady, color depth is referred to as mode. To choose color 
depth, click Image on the menu bar, and then point to Mode. You will see a list of color 
modes, including Bitmap, Indexed, and RGB; most of the modes are meant for print 
projects and are not appropriate for Web graphics. The two color modes you use for Web 
graphics are RGB color and indexed color. Indexed color has a depth of between 1-bit 
and 8-bit. RGB color is 24-bit color. 


Using RGB Color 


In RGB mode, the color depth is 24 bits; each of the three color channels has a value 
between 0 and 255. Recall that combining the three channels produces over 16 million 
possible colors. 


You should use RGB color mode to edit images because many filters work only with 
this mode. RGB color creates large files, however, so save images with this mode only 
when they have rich color gradients, or when they are photographs with many colors. 


When you create and save Web graphics, always start with 24-bit RGB color as you edit 
the image. If necessary, reduce the color depth later, when you are ready to save the 
image. If you need to edit an existing image, increase the color depth to RGB before 
you edit. All painting tools, filters, and other editing tools produce better results when 
you use them in RGB mode. 


To increase the color depth to RGB color, select an image and then follow the steps below. 
To increase color depth to RGB color: 

1. Click Image on the menu bar. 

2. Point to Mode. 

3. Click RGB Color. 


You will not see a change in the image, because the actual colors used in the image have 
not changed. What has changed is the number of available colors. This improves the 
results when you edit the image. 


Using RGB Color to Control Jagged Edges 


Hundreds or thousands of colors in a palette might seem like more than enough, espe- 
cially for a simple black-and-white image. But, when you use all the colors, they fill in 
the feathered areas between the image’s foreground and background. You can see the dif- 
ference when you reduce the color palette of an image containing a diagonal or curved 
line. What was a straight, soft line becomes a ragged staircase. This rough line is described 
as being jaggy, and has an abrupt transition from foreground to background. As you can 
see in Figure 2-7, reducing colors too much results in jaggy edges. 
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Low-color in this image produces 
jagged edges 


High color in this image produces 
soft edges 


Figure 2-7 The same image in a jagged low-color version and a high-color version 


When you resize an image or use a paint tool, Photoshop adds pixels to fill in the gaps 
created when the original pixels are spread out. Photoshop fills in the missing spaces by 
resampling or interpolating, that is, calculating the proper colors to use between the 
original pixels. Figure 2-8 shows an image resized in 8-bit and 24-bit color depth. 


Original image 
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Figure 2-8 Resizing in different modes 


As you learned in the Introduction to Web Graphics chapter, to resize an image in 
Photoshop, you click Image on the menu bar, and then click Image Size to open the 
Image Size dialog box, where you can specify the width and height of the image. When 
resizing an image, Photoshop resamples the image to interpolate the missing pixels. You 
can resample pixels in one of three ways: Nearest Neighbor, Bilinear, or Bicubic. 


The Nearest Neighbor method produces jagged edges, while the Bicubic method pro- 
duces smooth edges by interpolating pixels. The Bilinear method produces edges that 
are somewhat less smooth than the Bicubic method. The first two methods, Nearest 
Neighbor and Bilinear, are faster when you are working on very large images, but 
Bicubic interpolation, the default method, produces the smoothest results, and is your 
best choice for Web graphics. 
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The effects of interpolation are visible only when an image contains curved lines or gra- 
dients. You should save these images in 24-bit RGB color. You can safely use indexed 
color to save images that contain only vertical or horizontal lines and have no grada- 
tions of color. 


Using Indexed Color 


If 24-bit color is more than an image needs, or produces a file that is too large, you 
should reduce the color to Indexed Color mode. While RGB color must have exactly 
24 bits of color in the palette, indexed color images can have any number of colors, up 
to 8-bit, or 256 colors. 


Using the Color Look-up Table with Indexed Colors 


Recall that an 8-bit color palette devoted to a specific primary color is called a color chan- 
nel. The color palette for an indexed color image is called a clut, or color look-up table. 
An indexed color image can have a color depth of three bits, which means the color palette 
holds up to eight different colors, one in each cell of the palette. But the image might have 
only some of these colors. If it uses five colors, for example, it leaves the other three cells 
in the palette empty. When software, such as Photoshop or a Web browser, opens the image, 
it also opens the associated color table and looks up the proper color for each pixel. 


The clut can list up to 256 colors, and each color has a unique ID. To see the clut for 
an indexed color image in Photoshop, you click Image on the menu bar, point to Mode, 
and then click Color Table. In ImageReady, the clut has its own palette. Open the image, 
and then to show the Color Table palette you click Window on the menu bar, and then 
click Show Color Table. The clut can have a maximum of 8 bits of color (256 colors), 
but often uses fewer to reduce file size. The Color Table palette in ImageReady is shown 
in Figure 2-9. 
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Figure 2-9 The Color Table palette 
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Some cluts are preset and always have the same colors in the same order. Among these pre- 
set color tables are the system color tables for Macintosh and Windows and the Web-safe 
color table, which has only 216 colors. Different browsers and operating systems use dif- 
ferent default color palettes. The 216-color Web-safe color table provides a standard for 
Web pages, which is viewed on different types of browsers and platforms. These 216 col- 
ors are the only ones guaranteed to look the same on every viewing environment. 


With indexed-color images, different images can have different cluts. When you paste an 
image selection into an image with indexed color, the colors of the pasted areas are dif- 
ferent in the new image. For example, in Figure 2-10, the colors in the image named 
go.tif contain shades of red and green, but the image named bevel.tif uses a color table 
with only six shades of gray. When the full-color image is copied and pasted into the 
image with reduced colors, the pasted selection automatically matches the existing 
palette, resulting in undesired colors. To solve this problem, you increase the colors in 
the destination image. This is a potential difficulty in Photoshop, but not in ImageReady. 
ImageReady automatically converts every image to RGB mode. 
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Figure 2-10 Pasting into an indexed-color image with a reduced clut 


If you edit images or copy and paste between images in 24-bit color, all possible colors 
are available, and mismatching of colors in the table does not occur. This is why you 
should use 24-bit color while editing and manipulating files, even if you plan to save the 
image in a lower color depth. 


CHANGING COLOR DEPTH 


The process of reducing file size by reducing the number of colors is called opti- 
mization through color-reduction. If you reduce color depth from 8-bit (256 colors) 
to 7-bit (128 colors), you halve the number of available colors in the color palette and 
reduce the file size by almost half as well. An image with 5-bit color depth has roughly 
one-quarter the file size of an image with 8-bit color depth. 


You can reduce many color images to 5-bit color before they show any negative effects. 
You also can reduce grayscale images (those with up to 256 shades of gray) to 3-bit color 
without losing any vital image data. Figure 2-11 shows a color drawing, a photograph, 
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and a black-and-white drawing with different color depths. The color drawing uses the 
most colors in its smooth gradations from one tone to the next. The quality deteriorates 
at depths below 7-bit.The photograph also uses many colors, but no tonal variation, and 
the quality deteriorates with a depth below 5-bit. The grayscale drawing tolerates color 
depth as low as 3-bit. 


7-bit color depth 


5-bit color depth 


Visible color degradation 


3-bit color depth 


Figure 2-11 Different images require different color depths 
Large high-quality images, such as photographs or 3-D images, often lose image data 
even at 8-bit color depth. These images should remain at 24-bit color. 


To reduce the color depth to 8-bit color in Photoshop, select the image and then follow 
the steps below. 


To reduce color depth to 8-bit: 
1. Click Image on the menu bar. 
2. Point to Mode. 


3. Click Indexed Color. This option lets you set any number of colors from 1-bit 
(2 colors) to 8-bit (28= 256 colors). You see the Indexed Color dialog box, illus- 
trated in Figure 2-12. 


4. Set the palette to Local (Perceptual). 


5. In the Colors text box, set the number of colors, from 2 to 256, if necessary, 
and then click OK. 
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Figure 2-12 Adjusting the color depth 


Choosing a Palette 


When you reduce the color depth of an image, you reduce the number of available col- 
ors in the color table. If the image uses more colors than are available in the new color 
depth, some colors are eliminated. 


When you reduce colors from the roughly 16 million available in 24-bit images to 256, 
for example, Photoshop finds the 256 most commonly occurring colors and uses those 
in the palette. To do this, Photoshop uses a color reduction method, which is a for- 
mula for counting the most common colors. 


To select a color reduction method, open the Indexed Color dialog box shown in 
Figure 2-12, and then click the Palette list arrow. You see the following list of options: 


a Exact: Creates a clut based on the colors currently used in the image. If the 
image has 256 or more colors, the clut contains the 256 most commonly 
used colors. You should use Exact only if the image uses very few colors and 
does not need to be reduced. 


a System (Windows or Mac OS): Uses the Windows or Macintosh system 8-bit 
palette. This option is seldom used for Web graphics. 


m Web: Uses the Web-safe palette of 216 colors. This palette reduces the amount 
of dithering (explained later in this chapter) that occurs in certain monitors. 


a Uniform: Creates a palette of uniformly sampled colors. Most images do not 
have uniformly distributed colors, so this reduction method usually produces 
poor results. 


a Perceptual: Creates a customized palette, giving weight to colors to which the 
human eye is more sensitive. 


m Selective: Is similar to the Perceptual color reduction method, but also gives 
weight to colors in the Web palette. This method usually produces the best 
color reduction results. 
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a Adaptive: Creates a table with colors from specific areas of the color spec- 
trum, based on which colors exist in the image. 


a Custom: Lets you create your own customized palette, or load a previously 
saved one. 


ma Previous: Uses the color table from the last image you converted. This is use- 
ful for some print projects, but is not so useful for Web graphics. 


The three methods you use most often when creating Web graphics are Adaptive, 
Selective, and Perceptual. These methods produce similar results. 


When you select the Uniform, Adaptive, Selective, or Perceptual color reduction 
method, you can specify how many colors to use in the final color table. Because the bit 
depth of indexed color images has a maximum of 8-bits, the maximum number of col- 
ors you can use is 256. Using fewer colors results in an image with smaller file size. 


Setting Other Color Reduction Options 


In creating the color table, you can force certain colors to appear, regardless of how often 
they appear in the image. Some software requires all images to have black and white in 
the color table. 


To include black and white in the color table: 


1. Select the image, and then to open the Indexed Color dialog box, click 
Image on the menu bar, point to Mode, and then click Indexed Color. 


2. Click the Forced list arrow, and then click Black and White so that the 
image can be edited later in other image software. (You do not need to use 
the other options in the Forced list for Web graphics.) 


When you create a new image, you can choose whether the background is white, is based 
on the background color in the toolbox, or is transparent. When you add colors to the 
image, the transparent areas are covered, as shown in Figure 2-13. You can preserve trans- 
parency so that the final image allows background colors to show through when displayed 
in a Web browser. (Transparency is discussed in detail later in this chapter.) 
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Figure 2-13 An image with a transparent background 
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To set the background color of an image: 


1. Select the image, and then to open the Indexed Color dialog box, click 
Image on the menu bar, point to Mode, and then click Indexed Color. 


2. To make the parts of the image with no color values transparent, click the 
Transparency box to check it, if necessary. 


3. To fill any existing transparent areas with the matte color, click the 
Transparency box to clear it. Then click the Matte list arrow and select a 
color, which is white by default. You can specify a matte color even when 
you select the Transparency box. The matte color then affects how feathered 
edges blend with the background color. If your images will appear in a Web 
page that has a colored background, make sure to set the matte color to the 
background color of the page. 


Figure 2-14 shows an image with transparent areas and a white matte against a colored 
background. You can see how the edges of the image do not match the background 
color. The figure also shows an image saved with the proper matte color. 
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Figure 2-14 Incorrect and correct matte colors 


Using Dither 


Unless you use the Exact color reduction method (see the “Choosing a Palette” section 
earlier in this chapter), the color table probably will not exactly match the colors used 
in the image. As you experiment with different color depths, you will notice that areas 
of gradient color develop stripes of color where there should be a smooth transition. 


When you reduce the color palette from 24-bit to 8-bit, even for images with simple gra- 
dations of color, banding often results. Banded color has thick stripes of color, instead 
of imperceptible color changes. Even though the 8-bit color palette has 256 colors, it 
isn’t enough to prevent banding. Figure 2-15 shows that banding is most noticeable in 
areas of gradient color. 
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Figure 2-145 A banded low-color version and a high-color version of the same image 


To prevent banding, try leaving the color depth at 24-bit. You also can simulate colors 
not in the color table by dithering existing colors. Dithering is a procedure used in many 
types of graphics in print and on the Web to simulate colors when the actual colors are 
not available. Instead of finding intermediate shades of color the way interpolating does, 
dithering creates patterns of color to simulate other shades. In print, for example, often 
the only available colors are the white of the page and black ink. To simulate shades of 
gray in images, the black ink is dithered, as shown in Figure 2-16, creating tiny dots of 
black in varying concentrations. These dots give the illusion of being shades of gray when 
viewed from a distance. 


Figure 2-16 Dithering to simulate intermediate tones 


To dither gradient colors: 


1. Select an image with reduced colors, and then to open the Indexed Color 
dialog box, click Image on the menu bar, point to Mode, and then click 
Indexed Color. 
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2. To prevent banding of gradient colors, click the Dithering list arrow and 
choose one of the dithering options described below: 


a None: Uses no dithering and causes banding of graduated colors. 


m Pattern: Uses a pattern of squares to dither the colors in the image. The 
pattern is unsightly and noticeable. You could use this for some print pro- 
jects, but not for Web graphics. 


a Diffusion: Produces a pattern that is not as obvious as the Pattern dither. 


a Noise: Produces a random pattern. For Web graphics, use this or the 
Diffusion dither. 


Figure 2-17 shows an image reduced to 4-bit color using the four different types of 
dither. The diffusion dither pattern usually produces the smoothest gradations. 


Diffusion dither 


No dither 


Pattern dither 


Noise dither 


Figure 2-17 The four dither options 


When you choose the diffusion dither pattern, you also can select the amount of dither 
to use, as a percent from 0 to 100.A higher percentage dithers more colors, but increases 
the size of the file. 


Normally, dithering affects all colors in the image, whether they are in the final color 
table or not. To dither only the colors that are not in the table, select the image, open 
the Indexed Color dialog box, and then click the Select Preserve Exact Colors box to 
check it. This prevents thin lines, such as text, from being dithered. 
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Dithering is appropriate for images with a lot of visual texture, such as photographs. 
The dither patterns are more noticeable in images without texture. Figure 2-18 shows 
images with different amounts of visual texture and the effect of dithering. The center 
image has no gradients, so little dithering occurs. The images on the left and right both 
have dithering, but the effect is concealed by the texture in the image on the left. The 
image on the right has noticeable dithering because of the smooth color gradations in 
the original image. 


Original images 


Few gradients, little dithering 


Smooth color gradations, noticeable 
dithering 


Dithering is concealed by texture 


Figure 2-18 Dithered images with different amounts of gradients and texture 


Controlling Color Reduction 


If reducing colors using the Indexed Color dialog box does not give you the control or results 
you want, you can use other Photoshop and ImageReady options. You can reduce colors by 
posterizing them or setting a threshold, and then convert the image to indexed color. 


Using the Posterize Command 


A quick way to change the number of colors in an image is to posterize the image. In 
Photoshop, this means reducing the colors used in an image without changing the col- 
ors in the color palette. 


To posterize an image in Photoshop: 
1. Open an image and then click Image on the menu bar. 
2. Point to Adjust. 


3. Click Posterize. You see the Posterize dialog box and your image, as illus- 
trated in Figure 2-19. 


4. In the Levels text box, enter the number of colors you want to use in the 
palette, and then click OK. 
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Figure 2-19  Posterizing an image 


Changing Color Depth 
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The Posterize dialog box lets you define the number of colors used in the palette. Although 
this reduces the palette, it does not affect the color depth. After you posterize an image, 
make sure to convert the image mode, for example, to Indexed or Grayscale. You can pos- 
terize an 8-bit image with 256 colors in its palette, and reduce it to use only two colors. 
The palette then contains the two colors in the image, plus 254 unused colors. 


Using the Threshold Command 


You sometimes will need to convert images to 1-bit color using just black and white. 
For example, if you have letterhead or a form for outgoing faxes, you might need to use 
a black-and-white version of your Web site logo. If you do not carefully reduce the color, 
the final image can appear too dark or too light, as shown in Figure 2-20. 


Original image 


Threshold too low 


Threshold too high 


Optimum threshold 


Figure 2-20 A 1-bit image reduced from a higher bit-depth 
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When you reduce colors to 1-bit color depth using the Indexed Color dialog box, 
Photoshop uses a threshold of 50%. This converts every pixel that is lighter than middle- 
gray to white, and every pixel that is darker than middle-gray to black. 


A 50% threshold works well for most bitmap color images, but you might find that it 
produces images that are too dark or light, such as those produced by photocopiers or fax 
machines. In Photoshop, you can control the threshold using the Threshold command. 


To use the Threshold command in Photoshop: 
1. Click Image on the menu bar. 
2. Point to Adjust. 
3. Click Threshold. The Threshold dialog box appears, as shown in Figure 2-21. 
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Figure 2-21 The Threshold dialog box 
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The Threshold dialog box shows a graph ofall the color information in the 
image, with pure black at the left, pure white at the right, and middle-gray 
controlled by the slider bar in the middle. Each vertical line in the graph rep- 
resents a shade of gray. Dark images have histograms with more lines on the 
left, and light images have more lines on the right. 


4. Make sure the Preview box is checked. 


5. To set the threshold at which grayscale pixels are converted to black or white 
ones, adjust the middle-gray slider. Drag the slider to the left to produce a 
lighter image, or drag it to the right to produce a darker one. Watch the 
image as it changes, and stop when you find the best setting. 


Instead of dragging the slider, you also can enter a value in the Threshold 
Level text box to change the threshold. 


6. Click OK. 


7. Convert the mode to Indexed Color and use any of the conversion meth- 
ods. Because the image already contains only black and white, the image 
should not change. 


Different types of images require different color depths. Once you determine the needs 
of an image, you can set the depth, and select an appropriate file format. 
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WORKING WITH FILE FORMATS 


Every computer file uses a particular kind of file format. Microsoft Word documents are 
saved in a .doc format, and Web pages are saved as .html files. Similarly, you can save 
graphics as .pict, .tif, or any of the many of existing graphics formats. Each format has 
different capabilities regarding color depth, transparency, animation, and other qualities. 
Most formats can be easily converted from one to the other. 


Although you can save an image in Photoshop in a variety of formats, only a few for- 
mats can be used for images that will appear in a Web page. Web browsers on their own 
can display only three formats: GIF (.gif), JPG (jpg or jpeg), and PNG (.png). GIF and 
JPEG are standard formats and can be viewed in any browser. PNG is a newer format 
and is supported only by newer browsers. Although most users can see PNG images with 
their browsers, a small percentage cannot. Avoid using the PNG format unless you are 
confident that all users who visit your Web pages have the latest browsers. 


Browsers can display formats other than GIF JPEG, and PNG, but require additional spe- 
cial programs to do so. Some of these programs are helper applications, which open the 
images in a new window. Yet another type of program is called a plug-in, and is incor- 
porated into the user’s browser. 


Using Plug-ins 


Recall from the Introduction to Web Graphics chapter, that Web browsers cannot ras- 
terize vector images, so they need additional software to convert vector images to bitmap 
images. The software that rasterizes vector images within a Web browser is one type of 
plug-in; you use a different plug-in for each vector format. You can even find plug-ins 
for nonWeb bitmap formats such as TIFE One common plug-in is used for Flash, and 
allows browsers to display vector animations. You also can use a plug-in to view text 
documents, such as Microsoft Excel or Adobe Acrobat files, in a browser. The drawback 
to using plug-ins is that only some versions of browsers include certain plug-ins. This 
means you can never be sure whether your audience has the proper plug-in. If they 
don’t, they won’t see your image or animation. 


When selecting a graphic file format, choose GIF or JPEG. They are the only format 
that do not require users to have a particular plug-in. 


Using GIF Images 


The Graphics Interchange Format (GIF) supports 8-bit color, but not 24-bit 
color. It is an appropriate format for images that can tolerate optimization through 
color-reduction. GIF supports transparency and even animation. Because of this, GIF 
is the most useful Web graphics format, and the one you probably will use most often 
for Web graphics. 
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GIF’s strengths make it a good file format for small, fast-loading images, animations, and 
images that have irregular shapes. But it is not a good format to use for high-color 
images such as photographs. 


You might occasionally see GIF referred to as gif87 or gif89.The version of the GIF 
format released in 1987 (gif87) does not support animation, but the version released in 
1989 (gif89) does. Current image-editing programs save GIF files with the newer gif 89 
version. 


Before you save a GIF image, convert it to Indexed Color mode. If you are 
trying to save an image as GIF in Photoshop, but notice that GIF is not listed 
as an option in the Save as type list, change the image to Indexed Color, and 
then save the file. 


CompuServe and GIF 


When you save an image in the GIF format in Photoshop, the format in the Save as type 
text box is CompuServe GIF This is because CompuServe owns the patent to the com- 
pression algorithm (known as LZW compression) used in the GIF format (and in the 
TIFF format). CompuServe charges licensing fees to companies such as Adobe so that 
they can use the LZW formula to open and save files in the GIF format. A few years 
ago CompuServe stated they will charge up to $5,000 for any site that uses GIF images 
created with software made by companies that have not paid the licensing fee. You, there- 
fore, should be concerned about the source of your GIF images. If you use products like 
Photoshop, where Adobe pays the licensing fee to CompuServe, you won’t be charged 
an extra fee. Exercise caution in using a freeware or shareware image editor. If the devel- 
opers of those tools haven’t paid the licensing fee, you are technically breaking the law 
by creating GIF files with them. The patent on LZW compression expires in 2002. 


Using JPEG Images 


The Joint Photographic Experts Group (JPEG) format supports 24-bit color, but not 
8-bit color. The JPEG format is supported by all browsers and is an appropriate format for 
photographs and other high-color images. JPEG does not use color-reduction to optimize 
image files. It uses another type of optimization called compression. Compression is a math- 
ematical manipulation of the file itself, and selectively eliminates areas of detail in the image 
to reduce the size of the file. This sort of compression results in lost image data and is called 
lossy compression. GIF images also use compression to reduce file size, but this compres- 
sion does not discard image data and is called lossless compression. 


You can adjust the amount of compression used in a JPEG image. A higher compres- 
sion creates a smaller file, but also produces blocks of banded color called artifacts. 
These artifacts are more noticeable in images with areas of solid color, and appear near 
areas of high contrast, such as around text or where dark lines occur against a light back- 
ground. For this reason, avoid using JPEG compression for images containing text. 
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Figure 2-22 shows an image with different compression settings. The image on the top 
is compressed at the minimum quality setting. The file is only 3 KB, but the image con- 
tains artifacts. The image on the bottom uses less compression. The file size is nearly 
5 KB, but the image contains fewer artifacts. 


Compressed at the minimum quality setting. The file is 
only 3 KB, but the image contains artifacts 


Uses less compression. The file is 5 KB, but the image 
contains fewer artifacts 


Figure 2-22 An image with different degrees of compression 


Each time you save a JPEG image with compression, new artifacts are generated. When 
you edit a JPEG file, use an original version that has not been compressed, if possible. 


The JPEG format does not support transparency or animation. If you save an image that 
contains transparency as a JPEG, all transparent areas are filled in with the matte color. 


Using PNG Images 


A new, free format has emerged in the past few years, and is called PNG (pronounced 
“ping”). Although the acronym officially stands for Portable Network Graphic, the 
unofficial name is PNG Not GIF as it is intended to replace the GIF format. 


PNG has some advantages over GIF images. One is that PNG images can be 24-bit or 
8-bit color, so PNGs can have small color palettes like GIFs or large color palettes like 
JPEGs. Another advantage is that PNGs support 8-bit transparency, while GIF supports 
only 1-bit transparency. This means the edge of a PNG fades smoothly into the back- 
ground of a Web page, while GIFs tend to have ragged edges. 


Another advantage of PNG is that the format is completely open-source, meaning any- 
one can develop software to work with PNG files without paying a license fee. Because 
some companies do not pay for the compression needed to open and save GIF files, 
many tools, especially freeware and shareware ones, cannot manipulate GIF images. 
However, these tools do support the open-source PNG format, suggesting that more 
programs will offer PNG-editing capability, while fewer will continue to support GIF 


One drawback to the PNG format is that only Netscape version 4 and higher and 
Internet Explorer version 4 and higher (commonly referred to as the 4+ browsers) 
display PNG images. Although most browsers currently used to visit Web sites are 
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versions 4+, people using older browsers cannot see PNG images. Another drawback is 
that PNG does not support animation. 


PNG also does not compress as well as JPEG. Even though you can store high-color images 
such as photographs in PNG, you cannot reduce their file size as you can with JPEG. 


Table 2-4 shows the differences between the GIF, JPEG, and PNG formats. 


Table 2-4 Comparison of the three Web graphics formats 


Color Indexed (8-bit) | RGB (24-bit) Either indexed or RGB 
Compression Lossless or lossy | Lossy (strong) | Lossless (weak) 


Animation Yes No No 


Transparency 1-bit No Full 8-bit alpha channel 


Browser support | Full Partial 


In general, because it supports transparency and animation, GIF is the most versatile 
image format and the best format to use for most Web graphics. The only reason not to 
use GIF is when you have a high-color image such as a photograph, in which case JPEG 
is the better format. As the Web develops, however, PNG might be used more often. 


Emerging Formats 


As the Web evolves, new file formats are developed for Web graphics. These emerging 
formats include SVG, JPEG2000, MNG, and XBMP. Each of these new formats is dis- 
cussed in the following sections. 


Scalable Vector Graphics 


A relatively new image format allows designers to include vector images in their Web pages 
without requiring that users have a particular plug-in. The scalable vector graphics 
(SVG) format is similar to the common Flash format. While Flash is a proprietary format 
owned by Macromedia, SVG is a public, open format that can be created by a variety of 
programs. Like Flash, SVG creates vector graphics with small file sizes, and creates image 
displays that scale well and print clearly. Unfortunately, current browsers do not support 
this format without a plug-in. New versions might support this format. 


JPEG2000 


The developers of the JPEG format are updating the JPEG format to allow better com- 
pression. The new format, which uses the suffix jp2, produces extremely small file sizes 
without any noticeable loss of image quality. There is no native browser support yet, 
although you can view JPEG2000 (JP2) images with a plug-in. 
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MPEG and MNG 


JPEG has an associated animation format called MPEG that uses the same algorithms 
as JPEG, but requires a helper application to be viewed on the Web. Similarly, PNG has 
a related animation format called MNG. The standard is still being developed, so it will 
be a few years before you can create MNG animations of your own. 


XBMP 


Increasing numbers of Web sites offer wireless versions of their pages. These pages have 
less formatting so that they can fit on the screen of a hand-held device such as a Palm 
Pilot or Web-enabled cell phone. 


Some of these devices display images, but only ones with very low color depths. 
Specifically, they display a 1-bit format called X-Bitmap, or XBMP. This format allows 
only black and white pixels. Most commercial software does not yet support this for- 
mat, but free software is available that converts a GIF image to an XBMP image. 


SAVING FILES AS WEB GRAPHICS 


In Photoshop, you select a file format for an image when you save the file. To save an 
image as a Web graphic, first determine which color depth is appropriate for the image. 
For 8-bit depth or lower, save the image as CompuServe GIF For 24-bit depth, save 
the image as JPEG. However, if the image has been converted to Indexed Color mode, 
the JPEG format does not appear as a format option in the Save As dialog box. Convert 
the image back to RGB mode to save it as a JPEG. 


Saving Images in the GIF Format 


If the image you want to save as GIF is in RGB mode, you can select the color reduc- 
tion and dithering methods when you save the file. After you do this, or if the image has 
already been converted to Indexed Color, you can select the row order of the image, 
either Normal or Interlaced. 


Normally, Web graphics take a few seconds to download from the Web server, and only 
when the complete file has been loaded does it appear in the Web page. When a GIF is 
saved with interlaced rows, an incomplete version of the image appears before the com- 
plete image has loaded. The rest of the image appears when the download is completed. 
Using interlaced GIFs is useful because it confirms to the user that an image is loading. 


To save an image file as a GIF in Photoshop: 
1. Open file 2-1.psd from the Data Disk. 
2. Click File on the menu bar, and then click Save As. 


3. In the Save As dialog box, enter 2-1GIF as the filename, and select the 
Chapter 2 folder on your hard drive as the location for the file. 
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4. Click the Format list arrow, and then click CompuServe GIF (*.GIEB). 
5. Click the Save button. 


6. In the Indexed Color dialog box, click the Palette list arrow, and then click 
Local (Selective). 


7. In the Colors text box, type 32 (5-bit). 


8. Make sure the Forced text box shows Black and White, the Transparency box 
is checked, the Matte text box shows None, and the Dither text box shows 
Diffusion. 


9. In the Amount text box, type 50. 
10. Click the Preserve Exact Colors box to check it. 
11. Click OK. 


12. In the GIF Options dialog box, make sure the Normal option button is 
selected, and then click OK. This saves the image as a GIF with transparency 
and optimization through color reduction. 


Saving Images in the JPEG format 


Recall that you can save RGB mode images as JPEGs, although JPEG images cannot 
include transparency. If the image contains any transparent areas, you can set a matte color 
during the save process. Any transparent pixels are converted to the color you specify. 


When you save an image as JPEG, you also can select a compression setting for the 
image. Compression settings run from the quality values 0 to 12. Zero is the maximum 
compression and creates a very small file at the expense of image quality. A quality value 
of 12 specifies minimal compression and creates a large file with little or no degradation 
of the image. 


You can preview the effects of compression on an image as you adjust the compression 
settings. You also can preview the size of the final image file and view the estimated 
download time for a given modem speed. The default modem speed is 28.8 Kbps (kilo- 
bits per second, not kilobytes per second), which is slower than average for most users, 
but is a good benchmark to use. Use a compression setting that keeps the download time 
as short as possible without compromising the quality of the image. 


You also can set the following format options for an image: 


a Baseline (“Standard”): The default, this option produces JPEG images that 
appear in all browsers, but results in slightly larger files. 


a Baseline Optimized: This option enhances the compression of the image, and 
creates even smaller file sizes. Very old browsers do not support images saved 
with this sort of optimization, so avoid using it unless you are confident that 
your audience is using newer browsers. 
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a Progressive: This option is similar to the interlacing of GIF images. Instead of 
the image appearing only after it has completely loaded, progressive JPEGs 
initially appear as a low-resolution version of the image. The resolution 
improves as the remainder of the image loads. Using the Progressive option 
sometimes increases file size, but actually reduces it for some images. It is not 
supported by some older browsers. 


To save an image file as a JPEG in Photoshop: 
1. Open file 2-1.psd from the Data Disk. 
2. Click File on the menu bar, and then click Save As. 


3. In the Save As dialog box, enter 2-1JPEG as the filename, and select the 
Chapter 2 folder on your hard drive as the location for the file. 


4. Click the Format list arrow, and then click JPEG (*.JPG, *.JPE). 
5. Click the Save button. 


6. In the JPEG Options dialog box, click the Matte list arrow, and then click 
None, if necessary. This converts transparent pixels to white. 


7. Make sure the Quality text box shows 5. If it does not, drag the slider until 
it does, or click the Quality list arrow, and then click Medium. 


8. Under Format Options, click Baseline (“Standard”), if necessary. 


9. Make sure the Preview box is checked and then note the file size and 
download time at 28.8 Kbps. The file should be about 6.3 K and download 
in 2.19 seconds on a 28.8 Kbps modem. 


10. Click OK. This saves the image as a JPEG optimization through compression. 
Just as you optimize 8-bit GIF images by reducing the colors in the Indexed Color dia- 
log box, you optimize 24-bit JPEG images by applying a compression setting in the 
JPEG Options dialog box. Both of these methods are convenient, but Photoshop and 
ImageReady include additional features for optimizing images. 


OPTIMIZING IMAGES WITH PHOTOSHOP AND IMAGEREADY 


The most recent versions of Photoshop include a feature called Save for Web that opens 
a dialog box, allowing you to optimize an image in any format, while previewing the 
effects on the image. ImageReady takes this one step further, and has a special Optimize 
palette that allows you to control optimization settings at any time. 


With Photoshop you optimize images after you finish editing. If you reduce color or 
compress a file and then make further edits, the quality of the image suffers. With 
ImageReady, however, you can set optimization settings that do not take effect until you 
save the image. This lets you see the effects of editing and optimization at the same time. 
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In ImageReady, you use three windows to optimize images: the main Image window 
(also called the document window), the Optimize palette, and occasionally the Color 
Table palette. These windows are shown in Figure 2-23. 
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Figure 2-23 Three tools for optimizing an image in ImageReady 


In Photoshop, these three windows are combined in the Save for Web dialog box, shown 
in Figure 2-24, along with a few tools from the toolbox. 


Save For Web z 
Tabs to preview 


optimization states 


Annotation, including 
optimization settings and 
projected file size 


Figure 2-24 The Save for Web dialog box in Photoshop 
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To optimize an image in Photoshop, select Save for Web from the File menu. To opti- 
mize an image in ImageReady, use the Optimize palette. Make the palette visible by 
selecting Show Optimize from the Window menu. 


Previewing Optimized Images 


In ImageReady, the Image window always has four tabs along the top. Selecting these 
tabs allows you to preview different optimization states of the image. In Photoshop, you 
must select Save for Web to see these tabs. Each tab is described below. 


a Original: This tab displays the original 24-bit image, without any optimization. 


a Optimized: This tab displays the image with the currently selected optimiza- 
tion settings. This is a preview of how the image will appear after it is saved. 


m 2-Up: This tab displays two image preview panels next to each other. You can 
view the original image next to an optimized version, or compare two differ- 
ent optimization settings. 


a 4-Up: This displays four image preview panels ina 2 X 2 table. You can 
compare different optimization settings this way. 


When you select the 2-Up or 4-Up tab, you see annotation about each optimized ver- 
sion at the bottom of every window. The annotation includes the optimization settings 
for the image and the projected file size of the image when you save it with those set- 
tings. As you experiment with different settings, look at the image previews to see how 
the settings affect the quality of the image. You can hide the annotations to make room 
for the image previews. You can do this in ImageReady by selecting Hide Optimization 
Info from the View menu. 


If you do not show the annotations, look at the numbers at the bottom of the window to 
see how the settings affect file size. In ImageReady, at the bottom of the document win- 
dow are additional choices for how to display information about the image. You can pre- 
view the size of the original file, how long it takes the optimized file to download at 
different connection speeds, or how much file space is saved by using a given optimiza- 
tion setting. 


You have only limited editing capability when you preview an image in any panel other 
than the original, unoptimized view. To make changes to the image, first select the 
Original panel. 


Using Predefined Optimization Settings 


Although you can customize image optimization, you might find it easier to use one of 
the 12 predefined optimization settings in ImageReady. These contain seven color 
reduction settings for the GIF format, and use different color depths and dither options. 
The predefined optimization settings also contain three JPEG settings with different 
compression options, and two settings for PNG images. 
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To use a predefined optimization setting in ImageReady: 
1. In ImageReady, open file 2-1.psd from the Data Disk. 
2. Save the file as 2-1Optimized.psd in the Chapter 2 folder on your hard drive. 
3. In the Image window, click the 2-Up tab. 
4. Click the right panel to select the optimized version of the image. 
5 


. In the Optimize palette, click the Settings list arrow, and then click the first 
preset optimization setting, GIF 128 Dithered. This reduces color to 7-bit 
using the Selective color reduction method, and activates 88% diffusion 
dithering for the image. 


6. Look at the image previews and compare the quality of the images. Look at 
the annotation for each panel and compare the file sizes. 


7. Select the other presets to find the setting that creates the smallest file with- 
out reducing the quality of the image. 


8. Save the image with its current name (2-1Optimized.psd) in the Chapter 2 
folder of your hard drive. 


Once you find a preset that generates good results, you can fine-tune the settings by 
selecting other options in the Optimize palette. If you change the settings, the option in 
the Settings text box changes to [Unnamed]. This means that you are customizing the 
settings. 


If you create an optimization setting that you want to save and use later for other images, 
click the right triangle on the Optimize palette to open the palette menu, and then click 
Save Settings. In the Save Optimization Settings dialog box, enter a descriptive name for 
the new setting, and then click the Save button. The new setting now appears in the 
Settings menu. 


Optimizing GIF Images 


When you select GIF as an image format or select one of the GIF presets in the 
Optimize palette in ImageReady or in the optimization settings area of the Save for Web 
dialog box in Photoshop, the options change to resemble the Indexed Color dialog box. 
In ImageReady, make sure to select Show Options from the Optimize palette menu. 
This expands the palette to display additional options, including transparency. 


You then can select options for number of colors, color reduction method, dithering, 
and so forth. You also can add JPEG-style lossy compression and force the color table to 
use Web-safe colors. These two options are explained in the following sections. 
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Using Lossy Compression 
By adding lossy compression, you can sometimes purposely reduce detail and quality of 


GIF images to reduce file size. Lossy compression is available only for GIF images that 
are not Interlaced and do not use the Noise or Pattern dither options. 


In ImageReady, the Optimize palette includes the Lossy text box. To change the lossy 
compression, either enter a number from 0 to 100, or click the Lossy list arrow and then 
use the slider bar to change the value. A value of 0 means no lossy compression is 
applied. A value of 100 means the maximum amount of compression is applied. At a cer- 
tain lossy compression setting, you will see artifacts begin to appear in the image. The 
exact setting depends on the amount of detail in the image. For most images, you should 
be able to apply up to 5% lossy compression without noticing a difference in image qual- 
ity. However, this small change saves file size. Increasing the amount of lossy compres- 
sion increases the amount of image data sacrificed for file size. You can generally apply 
up to 40% or 50% compression to an image before you significantly degrade the image. 


Using lossy compression with GIF images produces artifacts, just as it does with JPEG 
images. Sometimes these artifacts actually improve the quality of an image by masking 
any banding between color areas. 


Using Web Snap 


Another option for optimizing GIF images is setting a percentage value for Web Snap. 
This setting controls how to reduce the color table. A Web Snap value of 0% indicates 
that you want to reduce the color table using the current color reduction method. A 
value of 100% indicates that you want to reduce the color table using only colors in the 
Web-safe color table. Recall that Web-safe colors are guaranteed to not dither in any 
browser in any monitor. 


Using an intermediate value for Web Snap helps reduce the number of colors in the 
table, and helps reduce file size. However, higher values lead to banded color that can- 
not be remedied, even with full dithering settings. 


Working with the Color Table 


As you choose different optimization settings for the GIF format, you can see the col- 
ors in the color table change. In ImageReady, make the Color Table palette visible by 
selecting Show Color Table from the Window menu. From the Color Table palette 
menu, select Sort by Popularity to sort the colors in the color table from most used to 
least used. As you decrease the value in the Colors text box in the Optimize palette, the 
least popular colors are removed from the color table. 


Sometimes a particular color is important, even if it is not often used in an image. You 
can lock specific colors in the color table so that they are not removed by any of the 
color reduction methods. In the Color Table palette, select a color that you do not want 
removed, then click the lock icon at the bottom of the palette. Now even when you 
reduce colors, the locked colors remain. 
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Optimizing JPEG Images 


Optimizing JPEGs with the Optimize palette is similar to using the JPEG Options dia- 
log box. The key to JPEG compression is the Quality setting in the Optimize palette. 
Higher quality means lower compression and larger file size. Lower quality means higher 
compression and smaller file size. Instead of the values ranging from 0 to 12, however, 
in the Optimize palette they range from 0% to 100%. 


The Optimize palette also lets you set the Blur option. Because JPEG compression cre- 
ates artifacts in an image, you can minimize their appearance by blurring the entire 
image. In the Blur text box, you can enter any value between 0 and 2, including deci- 
mal fractions, to control the pixel radius of the blurring. A high value eliminates most 
artifacts, but likely makes the image too blurry to use. 


Optimizing by File Size 


Often Web pages are designed with a fixed total page weight. For example, to make sure 
a Web page downloads in less than a few seconds, you might decide that all the elements 
of the page must have a combined file size of less than 60 KB. If the HTML file itself 
has a size of 30 KB, that leaves another 30 KB for all the graphics on the page. It is then 
convenient to optimize an image based on a fixed file size, rather than to find the max- 
imum optimization that does not compromise image quality. 


To optimize by file size: 


1. In ImageReady, click the right triangle in the Optimize palette to open the 
palette menu, and then click Optimize to File Size. 


In Photoshop, click File on the menu bar, click Save for Web, click the 
right triangle next to the Settings text box, and then click Optimize to 
File Size. 


You will see the Optimize To File Size dialog box, shown in Figure 2-25. Use 
this dialog box to set parameters, and then let the software find the best opti- 
mization settings for you. 


Optimize To File Size 
Desired File Size: |J K 
Start With 
’ Cancel | 
@ Current Settings 


C Auto Select GIF /JPEG 


Use 

@ Current Slice 

© Each Slice 

© otal or AN Slices: 


Figure 2-25 The Optimize To File Size dialog box 
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2. In the Desired File Size text box, enter a target file size for the optimized image. 


You will have a good idea of what a reasonable size is after you have opti- 
mized several images of different sizes. The target size depends on the dimen- 
sions of the image and the number of colors it has. A small image of 50 X 50 
pixels with a few colors can be optimized to less than 1 KB.A 200 X 200 
pixel photograph, however, might require at least 20 KB. Start with a low 
number, such as 2, and see how the optimization affects the image. If the 
image quality deteriorates too much, try a larger target size. 


3. To try only optimization settings for the file format currently selected in the 
Optimize palette, select the Current Settings option button. To choose an 
appropriate format based on the number of colors used in the image, select 
the Auto Select GIF/JPEG option button. 


Generally, the Auto Select option produces the best results. However, if the 
image is an animation, or contains transparency, you must use the GIF for- 
mat. Set the format to GIF in the Settings text box in the Optimize palette, 
and select Current Settings in the Optimize To File Size dialog box to find 
only optimal GIF optimization settings. 


(The other options in the dialog box are for slices, which are covered in a 
later chapter.) 


4. Click OK to optimize the image to the file size you specified. 


Saving Optimized Images 


After you set the optimization options in Photoshop, click OK in the Save for Web dia- 
log box to save an optimized image. In ImageReady, choose Save Optimized As from 
the File menu. Both these actions open the Save Optimize As dialog box, where you can 
choose a location and name for the file. You can overwrite the original image, if you 
want, but it’s a good practice to save optimized images with different names and pre- 
serve the original images in case you want to optimize them in the future. 


When optimizing, do not choose Save As in ImageReady; this saves the orig- 
gt inal image without any of the optimization settings. 


You can also choose to save an HTML file along with the image. This is useful only if 
you are saving advanced types of Web graphics, such as image maps or image slices. For 
most optimized images, you can save the images only. To do so, in the Save Optimized 
As dialog box, click the Save as type list arrow, and then click Images Only. 
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CHAPTER SUMMARY 


o 


The file size of an image is based on the dimensions of the image and the 
number of colors used in the image. 


Optimizing graphics means reducing the file size of an image as much as possi- 
ble without sacrificing image quality. Whether you are creating image maps or 
animated rollovers, you must optimize all Web graphics. 


You can optimize images by reducing the number of colors used in the image. 
Color reduction can result in banding; a remedy for banding is to use dithering. 


Web pages can use three bitmap image formats: GIF, JPEG, and PNG. GIF and 
PNG images are optimized primarily through color reduction, while JPEG 
images are optimized through lossy compression. 


The JPEG format is best for photographs and other high-color images. GIF is 
best for most others. 


GIF is the only format that allows animation without requiring a plug-in. 


Compression can result in artifacts. The remedy for artifacts is to use less 
compression. 


REVIEW QUESTIONS 
1. How much bigger is one kilobyte than one kilobit? 


a 


. Same size 


b. Eight times bigger 


c 


. 24 times bigger 


d. 1000 times bigger 


2. How long does it take to transfer a 5 KB image file over a 40 KB connection? 


a 


. Roughly one second 


b. Roughly four seconds 


Cc 


. Roughly five seconds 


d. Roughly eight seconds 


3. If you have a 100 Kbps connection, what is the biggest image you could transfer 
in one second? 


a 
b 


. 8 KB 
. 12 KB 


c. 120 KB 
d. 800 KB 


10. 
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. How many colors are in the palette of an image with a color depth of 7-bit? 


a. 24 
b. 64 
c. 128 
d. 256 


. How many color channels are there in a 24-bit image? 


a. 1 
b. 2 
Co 
d. 4 


. What is the maximum number of colors in a Color Look-Up Table? 


a. 8 

b. 256 

c: 512 
d. 65,536 


. What color depth should you use for your images while you edit them? 


a. 1-bit 
b. 8-bit 
c. 24-bit 
d. 32-bit 


. What is a good color depth for most photographs? 


a. 5-bit 
b. 8-bit 
c. 24-bit 
d. 32-bit 


. What is not a commonly used color reduction method? 


a. Adaptive 

b. Perceptual 

c. Selective 

d. Uniform 

Why would you dither an image? 
a. To blur the image 

b. To enable transparency 

c. To minimize banding 


d. To reduce file size 
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11. Which format(s) can be viewed in any browser without a plug-in? 
a. GIF 
b. JPEG 
c. PNG-8 
d. PNG-24 
12. Which of the following formats support transparency? 
a. GIF 
b. JPEG 
c. PNG-8 
d. PNG-24 
13. Which of the following formats support animation? 
a. GIF 
b. JPEG 
c. PNG-8 
d. PNG-24 
14. Which of the following formats support high-color images such as photographs? 
a. GIF 
b. JPEG 
c. PNG-8 
d. PNG-24 
15. Which of the following formats can be optimized through color reduction? 
a. GIF 
b. JPEG 
c. PNG-8 
d. PNG-24 
16. When would you use the Threshold command? 
a. When reducing color to 8-bit 
b. When reducing color to 1-bit 
c. When increasing color to 8-bit 
d. When increasing color to 2-bit 
17. What does a Quality setting of High do to an image? 
a. Uses maximum lossless compression 
b. Uses maximum lossy compression 
c. Uses minimal lossless compression 


d. Uses minimal lossy compression 
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18. What is the maximum possible value for the Blur setting when optimizing JPEGs? 


a. 1 
b. 2 
c. 8 
d. 12 


19. What does the Web Snap setting do? 


a. Allows the image to appear on the Web 
b. Allows interlacing rows 
c. Forces colors in the color table to shift to Web-safe colors 


d. Toggles between transparency and matte 


20. Which JPEG options are sure to make the image visible in all browsers? 


a. Both Progressive and Optimized selected 
b. Progressive unselected and Optimized selected 
c. Progressive selected and Optimized unselected 


d. Progressive unselected and Optimized selected 


HANDS-ON PROJECTS 


Project 1: Using Interpolation When Resizing an Image 


You need to resize an image that already has been optimized, but you see that the resulting 


image has jagged edges. Increase the color depth to improve the results. 


1 
2. 


In Photoshop, open the image file 2-1.tif from the Data Disk. 


Use the Image Size dialog box to increase the height to 100 pixels, but constraining 
proportions. 


. The resulting image has jagged edges because there are not enough colors in the 


color table to resample and interpolate accurately. Undo the image resize. 


. Open the Color Table dialog box. Note the number of colors this image uses— 


only seven colors, plus one color for transparency. Close this dialog box. 


5. Change the mode to RGB. This gives the image 16.7 million colors for interpolation. 


an 


. Resize the image again. This time the pixels should be interpolated correctly. 


. The process of interpolation adds colors to the color table. Reduce the color 


depth back to its original level. Use the Indexed Color dialog box to reduce the 
number of colors to 8. 


. Save the image as 2-1.gif in the Chapter 2 folder on your hard drive. 
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Project 2: Copying Image Data Between Images with 


Dif 


ferant Color Tables 


You have two images with indexed color modes. Each has a different clut. Copying 
image data from one image to the other produces undesirable results. Change the color 
depth to fix the problem. 


1. 
2: 


8. 


In Photoshop, open the image files 2-1.tif and 2-2.tif from the Data Disk. 


Select file 2-1.tif, then select all the image data by clicking the Select menu, and 
then clicking All. 


. Copy the selected area, then select file 2-2.tif and paste the selection into the image. 


. The selection adopts the clut of the new image and the colors change. Undo the 


Paste command. 


. Change the mode of the destination image to 24-bit so that the color table effec- 


tively has all colors. 


. Paste again (you do not need to recopy the selection). The selection maintains its 


original colors. When you are asked if you want to flatten layers, click Yes. 


. Use the Indexed Color dialog box to reduce the colors again. When Photoshop 


prompts you to save layers, click OK. For the color reduction method, select Exact. 


Save the image as 2-2.gif in the Chapter 2 folder on your hard drive. 


Project 3: Creating a 1-bit Image 


Your team is preparing a wireless version of your Web site for hand-held devices. They 
need a smaller, 1-bit version of the logo to appear on these devices. 


1. 
2. 
3. 


Open the image file 2-3.tif from the Data Disk. 
Open the Threshold dialog box. 


The slider at the bottom of the graph and the number box at the top let you 
control the dividing value between white and black. Make sure the preview box is 
selected, and adjust the levels until the image looks as clear as possible, while 
maintaining the general outline of the logo. When you are finished, click OK. 


. Select the Zoom tool and zoom in by clicking the image once or twice. You 


may notice some stray black pixels. 


. Set the background color to white by clicking the Default Foreground and 


Background Colors button near the bottom of the toolbar. This sets the fore- 
ground to black and the background to white. 


. Select the Eraser tool. 
. In the Options palette, make sure the brush shape is set to block. 


. Erase the stray pixels by clicking them with the eraser. If you need more control, 


zoom in further with the Magnifying Glass tool. 


. Change the color depth to 3 colors and save the image as 2-3.gif in the Chapter 2 


folder on your hard drive. 
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Project 4: Optimizing a Photograph 
You need to optimize a photograph. Choose an appropriate format and optimiza- 
tion method. 


l 
2. 
3: 


6. 


In ImageReady, open the image file 2-4.tif from the Data Disk. 
Click the 4-Up tab to compare multiple optimization settings. 


Select the image preview in the upper-right panel, and select the GIF 32 
Dithered preset in the Optimize palette. 


. Select the image preview in the lower-right panel, and select the JPEG Low preset 


in the Optimize palette. 


. Compare the two optimized versions with each other and with the original 


image in the upper-left panel. Both optimized versions look roughly the same. 


Use the Zoom tool to magnify the image previews. You can see artifacts in the 
JPEG-optimized image. Increase the Quality to 20. 


. Both optimized images have minimal banding, but the JPEG-optimized image is 


less than half the size of the GIF-optimized one. Save the optimized image as 
2-4.jpg in the Chapter 2 folder on your hard drive. 


Project 5: Optimizing a Low-Color Graph 


Diagrams and charts often use very few colors because they are generated from vector 
programs and have no gradient color. Optimize a low-color graph. 


1. 
2. 


In ImageReady, open the image file 2-5.tif from the Data Disk. 


Select the 4-Up tab to position the original image on the left of the screen, and 
a test optimized version on the right. 


3. Set the image preview in the upper-right panel to the GIF 32 Dithered preset. 


4. Set the image preview in the lower-left panel to JPEG Low. 


5. Compare the two optimized versions. The JPEG version has a larger file size and 


several artifacts around the black lines in the image. 


6. Reduce the colors in the GIF version to 5 colors, and record the file size. 


7. Reduce the colors to 4, and record the file size. Reducing colors in this instance 


has actually increased the file size by forcing the colors to dither. 


. Disable dithering. This reduces the file size further, but the red color is lost. 


Increase colors to 5 again. 


. This is a reasonable optimization. Save the optimized image file as 2-5.gif in the 


Chapter 2 folder on your hard drive. 
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Project 6: Optimizing a Textured Image 


po ` : 4 N ë 4 : 
Ss) Visual texture conceals banding, dithering, and JPEG artifacts. Images with a lot of visual 
texture usually can be optimized more than images without much visual texture. 
Optimize this drawing. 


1. 
2. 
3. 


Aaas-oh 


Project 


In ImageReady, open the image file 2-6.tif from the Data Disk. 
Use the 4-Up view. 


Set the upper-right panel to GIF 32 Dithered, and the lower-left panel to 
JPEG Low. 


. The JPEG version shows little degradation. Reduce the Quality to 0, the maxi- 


mum compression. The image still shows no obvious artifacts. 


. The file size is about 7.6 KB. Try optimizing through color reduction to reduce 


the file size. 


. Reduce the colors of the GIF optimization to 4 colors. The file size is smaller, but 


the black color of the tree trunk is missing. 


. Increase the colors to 16, and find the dark green or black color in the Color 


Table palette. Select the color and lock it. 


. Reduce colors to 4 again. The file size is reduced, and the dark color is retained. 


. Save the optimized image as 2-6.gif in the Chapter 2 folder on your hard drive. 


Project 7: Fine-Tuning an Optimization 
Often you can save a few extra kilobytes by tweaking the optimization settings. Optimize 
another drawing. 

T: 


In ImageReady, open the image file 2-7.tif from the Data Disk. 


2. Use the 4-Up view. 
3. 
4 


. Compare the two optimized previews with each other and with the original 


Set one of the panels to a GIF optimization preset, and set another to a JPEG preset. 


image. The image has dark lines, so the JPEG optimization produces noticeable 
artifacts. The image also has color gradations, so the GIF optimization produces 
noticeable banding. 


. Zoom in to one of the previews. Notice that all previews are magnified. Find the 


lowest Quality setting for the JPEG compression that produces no artifacts. 


. Choose No Dithering for the GIF preview, and find the fewest colors that do 


not produce obvious banding. The GIF optimization should have a slightly smaller 
file size than the JPEG optimization. 


. Try different color reduction methods and different lossy compression settings for 


the GIF preview to find the one that produces the smallest file size. 


. Save the optimized image as 2-7.gif in the Chapter 2 folder on your hard drive. 
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Project 8: Optimizing to a Specific File Size 


The target page weight for a Web page is 80 KB. The HTML file is 50 KB, and you already 
have 25 KB worth of other graphics on the page. Reduce the image in this project to 
5 KB, sacrificing image quality as little as possible. 


1. In ImageReady, open the image file 2-8.tif from the Data Disk. 
2. Use the 2-Up view. 


3. Open the Optimize To File Size dialog box, set the Desired File Size to 5 K, and 
then select Auto Select GIF/JPEG. 


4. Click OK. ImageReady automatically optimizes the image using JPEG compression 
so that the file size is under 5 KB. 


5. Save the image as 2-8.jpg in the Chapter 2 folder on your hard drive. 


CASE PROJECT 


all the images of past work you have gathered for your portfolio, and optimize them as 


A| All of the images that will appear in your online portfolio need to be optimized. Take 
GIF or JPEG images, depending on what is appropriate for each image. 


Think about how you will lay out the images in different pages of your portfolio. 
Determine a target size for each page, and make sure that the total file size of all the 
images on each page does not exceed the target size. 


